<template>
  <div class="bg-white _p-20">
    <div class="disFlx">
      <div class="flex-shrink-0 _mr-20">
        <img class="img" :src="info.coverUrl" alt="" />
      </div>
      <div class="linh-28" style="flex:1">
        <div class="disFlxJS">
          <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">活动名称：</div>
            <div>{{ info.title }}</div>
            <DictTag
              :options="Dict.getLocal('activityStateDict')"
              :value="String(info.activityStatus)"
              class="_ml-10"
            />
            <div>
              <a-tag color="#2db7f5" class="_ml-10">{{
                info.display === displayEnum.HIDE ? '对外隐藏' : '对外展示'
              }}</a-tag>
            </div>
          </div>
          <div>
            <a-button icon="reload" type="primary" ghost @click="$emit('refresh')">刷新数据</a-button>
          </div>
        </div>

        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">活动地点：</div>
          <div>{{ info.addressName }}</div>
        </div>
        <div v-if="!disabled" class="disFlx">
          <div class="flex-shrink-0 w-[120px]">报名费用：</div>
          <div v-if="info.minPrice == info.maxPrice && info.maxPrice" style="color:red">
            {{ formatMoney({ money: info.minPrice, isShowFree: false }) }}
          </div>
          <div v-else-if="!info.maxPrice" style="color:red">
            {{ formatMoney({ money: info.maxPrice, isShowFree: false }) }}
          </div>
          <div v-else style="color:red">
            {{ formatMoney({ money: info.minPrice, isShowFree: false }) }}
            ~
            {{ formatMoney({ money: info.maxPrice, isShowFree: false, symbol: '' }) }}
          </div>
        </div>
        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">创建时间：</div>
          <div>{{ info.createTime }}</div>
        </div>
        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">活动时间：</div>
          <div>{{ info.startTime + ' ~ ' + info.endTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DictTag from '@/components/DictTag'
import { activityTypeEnum, displayEnum } from '@/enums/activity'
import { formatMoney } from '@/utils/number'
export default {
  components: {
    DictTag
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    disabled() {
      return this.info.activityType === activityTypeEnum.other_join // 协办方
    }
  },
  data() {
    return {
      displayEnum
    }
  },
  methods: {
    formatMoney
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 220px;
  height: 140px;
  object-fit: contain;
}

.buttons {
  .ant-btn {
    margin-top: 10px;
  }

  .ant-btn + .ant-btn {
    margin-left: 5px;
  }
}
</style>
